﻿var iSec=getId('section');
var iList=getId('list');
var iNav=getId('nav-right');
var listLi=getClass(iList,'cont');
var iNow=0;
var btL=getClass(document,'l-bt')[0];//左切换按钮
var btR=getClass(document,'r-bt')[0];//右切换按钮
function setHeight(){
	var ch=document.documentElement.clientHeight;
	var cw=document.documentElement.clientWidth;
	listLi=getClass(iList,'cont');
	//设置宽高，使窗口不出现滚动条
	iSec.style.height=iList.style.height=ch+'px';
	iList.style.width=listLi.length*cw+'px';
	for(var i=0;i<listLi.length;i++)
	{
		listLi[i].style.height=ch+'px';
		listLi[i].style.width=cw+'px';
	}
}
setHeight();

window.onresize=setHeight;

//搜索框
function seaBox(){
	$(".search-logo").click(function(){
		$(".search-logos").slideToggle(100);
	})

	// 切换搜索
	var url_id=0;
	$(".search-logos>li").click(function(){
		var ic=$(this).find('span').text();
		$(".search-logo>a")[0].className='';
		$(".search-logo>a")[0].className='iconfont';
		if($(this).index()==0) {
			$(".search-logo>a").addClass('color1');
			$('.search-input>input').attr('placeholder','百度一下');
			url_id=0;
		}
		if($(this).index()==1){
			$(".search-logo>a").addClass('color2');
			$('.search-input>input').attr('placeholder','搜狗搜索');
			url_id=1;
		}
		if($(this).index()==2){
			$(".search-logo>a").addClass('color3');
			$('.search-input>input').attr('placeholder','谷歌');
			url_id=2;
		}
		$(".search-logo>a").text(ic);
	})

	$(".search").click(function(){
		var url=encodeURIComponent($('.search-input>input').val());
		if(url_id==0) window.location="https://www.baidu.com/s?wd="+url;
		if(url_id==2) window.location="https://www.so.com/s?q="+url;
		if(url_id==1) window.location="https://www.sogou.com/web?query="+url;

	})

}
seaBox();

//底部导航按钮事件
function navRigth(){
	var oLi=$('#nav-right li');
	oLi.live('click',function(){
		toMove($(this).index());
	});
}
navRigth();

//左右滚屏事件
var timer=null;//设置只滚一次的定时器
function toMove(i){

	if(timer)
		return false;
		
	var cw=$(window).width();
	iList.style.left=-i*cw+'px';//左右滚屏距离
	//底部导航样式
	$('.nr-ul li').removeClass('active');
	$('.nr-ul li').eq(i).addClass('active');
	iNow=i;
	
	//滚屏定时器
	timer=setTimeout(function(){
		timer=null;
		clearTimeout(timer);
	},700);
	
}

//左右滚屏按钮
function lr(){

	btL.onclick= function () {
		if(iNow==0)
			return;
		toMove(iNow-1);
	}
	btR.onclick= function () {
		if(iNow==$('.nr-ul li').length-1)
			return;
		toMove(iNow+1);
	}
}
lr();

//滚轮事件
function scroll(){
	var oLi=$('#nav-right li');
	function scrollFunc(ev) {
		var a = ev || window.event;
		if (a.wheelDelta) {
			if (a.wheelDelta > 0 && iNow>0) { //当滑轮向上滚动时
				toMove(iNow-1);
			}
			if (a.wheelDelta < 0 && iNow<oLi.length) { //当滑轮向下滚动时
				if(iNow==oLi.length-1)
					return;
				toMove(iNow+1);
			}
		} else if (a.detail) {  //Firefox滑轮事件的值 / 3。
			if (a.detail> 0 && iNow<oLi.length) {  //当滑轮向下滚动时
				if(iNow==oLi.length-1)
					return;
				toMove(iNow+1);
			}
			if (a.detail< 0 && iNow>0) {           //当滑轮向上滚动时
				toMove(iNow-1);
			}
		}
	}
	if (document.addEventListener) {
		document.addEventListener('DOMMouseScroll', scrollFunc, false);//冒泡阶段执行
	}
	window.onmousewheel=document.onmousewheel=scrollFunc;
}
scroll();

function getId(id){
	return document.getElementById(id);
}

function getClass(oParent,sClass)
{
	var aEle=oParent.getElementsByTagName('*');	//*抓取所有元素
	var result=[];
	for(var i=0;i<aEle.length;i++){
		var arr=aEle[i].className.split(' ');
		for(var j=0;j<arr.length;j++){
			if(arr[j]==sClass){
				result.push(aEle[i]);
				break;
			}
		}
	}
	return result;
}


/*------底部导航管理（有点复杂，写的不好，仅供参考！！！）------------------------------------------------------------------------------------------------*/
//右上角关闭按钮
$('#page-manager .close').click(function(){
	$('#page-manager-mask').css({'display':'none'});
	$('#page-manager').css({'display':'none'});
});


var arrPage=['most','zhibo','video','news'];
var arrLists=getLists();//存储页面内容，以便恢复
var arrNav=getNav();//获取导航信息

//底部导航“加号”按钮事件
$('.addPage').click(function(){
	$('#page-manager-mask').css({'display':'block'});
	$('#page-manager').css({'display':'block'});

	$('.nr-ul li').each(function(){
		var name=$(this).attr('class');
		for(var i=0;i<arrPage.length;i++)
		{
			if(name.indexOf(arrPage[i])>=0){
				$('.tab-list div').eq(i).addClass('selected');//已经存在的页面，在频道管理菜单里的选项打钩

			}				
		}
	});
});
function getLists(){
	return [
		{className:'most',cont:$('#list .cont').eq(0).html()},
		{className:'zhibo',cont:$('#list .cont').eq(1).html()},
		{className:'video',cont:$('#list .cont').eq(2).html()},
		{className:'news',cont:$('#list .cont').eq(3).html()}
	];
}

function getNav(){
	return [
		{className:'most',cont:'我的网址'},
		{className:'zhibo',cont:'精彩直播'},
		{className:'video',cont:'热播影视'},
		{className:'news',cont:'今日头条'}
	];
}


$('.tab-list div').click(function(){//菜单操作
	var that=$(this);
	var name=$(this).attr('class');
	var _index=$(this).parent().index();
	
	if(name=='selected'){//若存在频道（频道一打钩）
		$(this).removeClass('selected');
		$('.nr-ul .'+arrPage[_index]+'').remove();
		$('#list .'+arrPage[_index]+'').remove();
		toMove(0);
		scroll();//重新定义滚轮事件，因为删除频道会产生影响
	}
	else
	{//若不存在，重新动态添加频道页
		var li=$('<li>'+arrLists[_index].cont+'</li>');
		li.addClass('cont');
		li.addClass(arrLists[_index].className);
		$('#list').append(li);

		var nLi=$('<li>'+arrNav[_index].cont+'</li>');
		nLi.addClass(arrNav[_index].className);
		$('.nr-ul').append(nLi);//append追加到尾部
		
		//频道页面顺序的处理
		var n=0;
		if($('.tab-list li div').hasClass('selected')&&_index!=0){
			$(this).addClass('selected');
			for(var i=0;i<$('.tab-list .selected').length;i++)
			{
				if(that.html()==$('.tab-list .selected:eq('+i+')').html()){
					n=i;
					break;
				}
			}
			li.insertAfter($('#list .cont').eq(n-1));
			nLi.insertAfter($('.nr-ul li').eq(n-1));//应该插入的位置
		}else if($('.tab-list li div').hasClass('selected')&&_index==0){
			li.insertBefore($('#list .cont').eq(0));
			nLi.insertBefore($('.nr-ul li').eq(0));
		}
		
		
		iNow=n;
		toMove(n);
		$(this).addClass('selected');
		
		//动态添加会导致之前绑定的部分事件消失，因此重新绑定
		setHeight();
		drag();
		scroll();
	}
});
/*-完美运动框架--------------------------------*/

function drag(){
	var oUl=document.getElementById('ul1');
	var aLi=oUl.children;
	var zIndex=2;
//0.布局转换
	var aPos=[];	//[{left:?,top:?},{},{}]

	for(var i=0;i<aLi.length;i++){
		aPos.push({left:aLi[i].offsetLeft,top:aLi[i].offsetTop});
		aLi[i].style.left=aPos[i].left+'px';
		aLi[i].style.top=aPos[i].top+'px';
	}
	for(var i=0;i<aLi.length;i++){
		aLi[i].style.position='absolute';
		aLi[i].style.margin=0;
		aLi[i].index=i;
	}

//1.拖拽
	for(var i=0;i<aLi.length;i++){
		drag(aLi[i]);//拖拽每一个图标
	}

	function drag(obj){
		obj.onmousedown=function(ev){
			var oEvt=ev||event;
			var disX=oEvt.clientX-obj.offsetLeft;
			var disY=oEvt.clientY-obj.offsetTop;
			obj.style.zIndex=zIndex++;
			clearInterval(obj.timer);

			var time1=new Date().valueOf();

			//在鼠标移动并松开时，会打开链接，因此在拖拽的li上添加了z-index值较高的透明层
			var fake=document.createElement('div');
			fake.id='fake';

			document.onmousemove=function(ev){

				var oEvt=ev||event;
				obj.style.left=oEvt.clientX-disX+'px';
				obj.style.top=oEvt.clientY-disY+'px';

				//2.move时碰撞
				var nearObj=findNearest(obj);
				if(nearObj && nearObj!=obj){//撞到了
					//动所有的房客
					//交换索引，所有房客
					//'所有'有条件的
					var n=obj.index;
					var m=nearObj.index;
					for(var i=0;i<aLi.length;i++){
						//n<aLi[i].index<=m
						//m<=aLi[i].index<n
						if(aLi[i].index>n && aLi[i].index<=m){
							//←
							aLi[i].index--;
							move(aLi[i],aPos[aLi[i].index]);
						}else if(aLi[i].index>=m && aLi[i].index<n){
							//→
							aLi[i].index++;
							move(aLi[i],aPos[aLi[i].index]);
						}
					}
					obj.index=m;
				}
				
				//记录时间，
				var time2=new Date().valueOf();
				//在鼠标移动并松开时，会打开链接，因此在拖拽的li上添加了z-index值较高的透明层
				//时间差小于0.03s视为点击，否则添加透明层，防止点开链接
				if(!document.getElementById('fake')&&(time2-time1)>30) {
					obj.appendChild(fake);
				}
			};
			document.onmouseup=function(){
				document.onmousemove=document.onmouseup=null;

				//松开时移除透明层
				if(document.getElementById('fake'))
				{
					obj.removeChild(fake);
				}
				//抓着的对象回自个位置
				move(obj,aPos[obj.index]);

			};
			return false;
		};
	}
	function findNearest(obj){
		var minDis=99999999;
		var minIndex=-1;
		for(var i=0;i<aLi.length;i++){
			//if(obj==aLi[i]) continue;
			if(collTest(obj,aLi[i])){	//撞到的房子
				//还要找最近

				var dis=getDis(obj,aLi[i]);//取出来的也是obj1到房子的距离
				console.log(dis);
				if(dis<minDis){
					minDis=dis;
					minIndex=i;
				}
			}
		}
		if(minIndex==-1){
			return null;
		}else{
			return aLi[minIndex];	//就返房客出去
		}
	}
	function getDis(obj1,obj2){
		var a=aPos[obj2.index].left-obj1.offsetLeft
		var b=aPos[obj2.index].top-obj1.offsetTop;
		return Math.sqrt(a*a+b*b);
	}
	function collTest(obj1,obj2){//obj1对象和obj2的位置（房子)撞
		var l1=obj1.offsetLeft;
		var t1=obj1.offsetTop;
		var r1=obj1.offsetLeft+obj1.offsetWidth;
		var b1=obj1.offsetTop+obj1.offsetHeight;

		var l2=aPos[obj2.index].left;
		var t2=aPos[obj2.index].top;
		var r2=aPos[obj2.index].left+obj2.offsetWidth;
		var b2=aPos[obj2.index].top+obj2.offsetHeight;

		if(l1>r2||t1>b2||r1<l2||b1<t2){
			return 	false;
		}else{
			return true;
		}
	}
}

drag();

/*---------cont1---------------------------------------------*/
function cont1(){
	$('a.add-close').click(addClose);

	function addClose(){
		$('#page-manager-mask').css({'display':'none'});
		$('#addurl').css({display:'none'});
	}

	
	var uLi=$('#ul1 li');
	var uSize1={width:'202',height:'120'};//记录主页每个链接图片的宽高
	var uSize2={width:'135',height:'82'};//记录添加网址页每个链接图片狂傲
	uLi.each(function () {
		var _index=$(this).index();

		//删除（右下角叉号）
		$(this).find('.close').live('click',function () {
			uLi.eq(_index).find('.link').stop().animate({top:-uSize1.width}, function () {
				uLi.eq(_index).find('.box').removeClass(links[_index].name);
				$(this).remove();
			});
		});

		//添加链接 “加号”
		$(this).find('.adddh').live('click',function () {
			addUrl(_index);
		});
	});

	//链接信息数组
	var links=[
		{name:'fenghuang',src:'img/daohang (1).png',title:'凤凰网',href:'http://www.ifeng.com/'},
		{name:'souhu',src:'img/daohang (2).png',title:'搜狐网',href:'http://www.sohu.com/'},
		{name:'wangyi',src:'img/daohang (3).png',title:'网易',href:'http://www.163.com/'},
		{name:'qzone',src:'img/daohang (4).png',title:'QQ空间',href:'http://qzone.qq.com/'},
		{name:'daquan',src:'img/daohang (5).png',title:'影视大全',href:'http://www.360kan.com/index.html'},
		{name:'sina',src:'img/daohang (6).png',title:'新浪微博',href:'http://weibo.com/'},
		{name:'youku',src:'img/daohang (7).png',title:'优酷',href:'http://www.youku.com/'},
		{name:'baidu',src:'img/daohang (8).png',title:'百度',href:'http://www.baidu.com/'},
		{name:'jd',src:'img/daohang (9).png',title:'京东',href:'http://www.jd.com/'},
		{name:'tb',src:'img/daohang (10).png',title:'淘宝',href:'http://www.taobao.com/'},
		{name:'dh',src:'img/daohang (11).png',title:'360导航',href:'http://hao.360.cn/'},
		{name:'yingshi',src:'img/daohang (12).png',title:'360影视',href:'http://www.360kan.com/'}];

	var uList=$('.ul-list li');

	
	var fromIndex=0;//从主页第几个li点开，初始化0
	function addUrl(index){
		$('#page-manager-mask').css({'display':'block'});
		$('#addurl').css({display:'block'});

		var arrTitle=[];
		uLi.each(function () {
			var _index=$(this).index();
			if(uLi.eq(_index).find('.link')) {
				arrTitle.push(uLi.eq(_index).find('.link').attr('title'));
			}
		});

		uList.removeClass('selected');
		uList.each(function () {
			var name=$(this).attr('class');
			for(var i=0;i<arrTitle.length;i++){
				if(name==arrTitle[i]){
					$(this).addClass('selected');//为主页已经存在的链接添加钩子
					break;
				}
			}
		});

		fromIndex=index;//从第index个来
	}

	uList.click(function () {
		var _this=$(this);
		var _index=_this.index();
		var name=_this.attr('class').split(' ')[0];
		if(!_this.hasClass('selected')){
			//不存在，动态添加
			setTimeout(function () {
				var newUrl=$('<div class="link" title="'+links[_index].name+'"></div>');
				var newA=$('<a href="'+links[_index].href+'"><img src="'+links[_index].src+'" /></a>');
				var newTit=$('<div class="tit"><span class="title">'+links[_index].title+'</span><div class="close"></div></div>');
				newUrl.append(newA).append(newTit);
				uLi.eq(fromIndex).find('.box').append(newUrl);
			},600);//等动画走完再添加，形成假象
		}
		else{
			//存在
			fromIndex=uLi.find('div[title='+name+']').parent().parent().index();
		}
		createAn(_index,fromIndex);//添加动画

	});

	//创建一个添加动画
	function createAn(here,there){
		var h=uList.eq(here);
		var t=uLi.eq(there).find('.box');
		//img移动添加过程为假象，在486行是真实的链接添加
		var img=$('<img src="'+links[here].src+'" />');
		img.css({width:uSize2.width,height:uSize2.height,position:'absolute',top:h.offset().top,left:h.offset().left,'z-index':'1000',opacity:'0.6'});
		$('body').append(img);
		img.animate({width:uSize1.width,height:uSize1.height,top:t.offset().top,left:t.offset().left,opacity:1},600, function () {
			$(this).remove();
		});
		addClose();
	}
}
cont1();